<template>
	<div>
		<el-page-header @back="handleBack" content="预览订单详情"></el-page-header>
		<el-row>
			<el-col :span="24">
				<el-form label-width="auto" size="mini">
				  <el-form-item label="订单编号"  >
						<div style="white-space: nowrap;" >
							{{addForm.orderNo}}
						</div>
					</el-form-item>
				  <el-form-item label="订单时间" >
						<div>
							{{addForm.insertTime}}
						</div>
					</el-form-item>
					<el-form-item label="购买商品" >
						<div>
							{{addForm.goodsName}}
						</div>
					</el-form-item>
					<el-form-item label="购买数量" >
						<div>
							{{addForm.count}}
						</div>
					</el-form-item>
					<el-form-item label="商品价格" >
						<div>
							{{addForm.goodsPrice}}
						</div>
					</el-form-item>
					<el-form-item label="商品折扣" >
						<div>
							{{addForm.goodsDiscount}}
						</div>
					</el-form-item>
					<el-form-item label="活动折扣" >
						<div>
							{{addForm.activityDiscount?addForm.activityDiscount:"无"}}
						</div>
					</el-form-item>
					<el-form-item label="活动名称" >
						<div>
							{{addForm.activityName?addForm.activityName:"无"}}
						</div>
					</el-form-item>
					<el-form-item label="实际支付" >
						<div>
							{{addForm.pay}}
						</div>
					</el-form-item>
					
					<el-form-item label="订单状态" >
						<div>
							<template v-for="itemStatus in statusList">
								<el-tag
									v-if="addForm.status == itemStatus.id"
									:key="itemStatus.id"
									:type="itemStatus.theme">
									{{itemStatus.name}}
								</el-tag>
							</template>
						</div>
					</el-form-item>
					<el-form-item label="物流单号" >
						<div>
							{{addForm.expressNo}}
						</div>
					</el-form-item>
					<el-form-item label="收货人" >
						<div>
							{{addForm.name}}
						</div>
					</el-form-item>
					<el-form-item label="手机号" >
						<div>
							{{addForm.phone}}
						</div>
					</el-form-item>
					<el-form-item label="收货人邮编" >
						<div>
							{{addForm.postCode}}
						</div>
					</el-form-item>
					<el-form-item label="收货人地址" >
						<div>
							{{addForm.province}}
							{{addForm.city}}
							{{addForm.area}}
							{{addForm.address}}
						</div>
					</el-form-item>
					<el-form-item label="备注" >
						<div>
							{{addForm.remark}}
							
						</div>
					</el-form-item>
					<el-form-item label="下单途径" >
						<div>
							<div v-if="addForm.type == 1">
								直接下单
							</div>
							<div v-else-if="addForm.type == 2">
								购物车下单
							</div>
							<div v-else-if="addForm.type == 3">
								拼团下单
							</div>
							<div v-else-if="addForm.type == 4">
								秒杀下单
							</div>
							<div v-else>
								其他
							</div>
						</div>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import { mapActions,mapState } from 'vuex';
	export default{
		name:'goods-add',
		data(){
			let _this = this;
			return {
				rules:[],
				addForm:{},
				subLoading:false,
				statusList:[
					{
						id:1,
						name:'已支付',
						theme:'primary'
					},
					{
						id:2,
						name:'已发货',
						theme:'warning'
					},
					{
						id:3,
						name:'确认收货',
						theme:'success'
					},
					{
						id:4,
						name:'申请退货',
						theme:'danger'
					},
					{
						id:5,
						name:'退货完毕',
						theme:'success'
					}
				],
			}
		},
		async created(){
			let id = this.$route.query.id
			this.addForm = await this.findById(id)
		},
		computed:{
			formatTime(){
				return function(time){
					let d = new Date(Number(time));
					return `${d.getFullYear()}-${d.getMonth()+1}-${d.getDate()} ${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`
				}
			}
		},
		methods:{
			...mapActions('orderModel',['findById']),
			handleBack(){
				this.$router.history.go(-1)
			},
		}
	}
</script>

<style scoped="scoped" lang="scss">
</style>
